<template>
  <footer>
    <!-- <div class="footer-item" v-for="item in footerList" :key="item.title">
      <span class="iconfont" :class="'icon-' + item.icon"></span>
      {{ item.title }}
    </div> -->

    <RouterLink
      :to="item.path"
      class="footer-item"
      v-for="item in footerList"
      :key="item.title"
    >
      <span class="iconfont" :class="'icon-' + item.icon"></span>
      {{ item.title }}
    </RouterLink>
  </footer>
</template>

<script>
export default {
  data() {
    return {
      footerList: [
        {
          title: "电影/影院",
          icon: "dianying",
          path: "/home/movies",
        },
        {
          title: "视频",
          icon: "video",
          path: "/home/video",
        },
        {
          title: "演出",
          icon: "menpiao",
          path: "/home/show",
        },
        {
          title: "我的",
          icon: "wode",
          path: "/home/mine",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.router-link-active {
  color: @theme-color;
}
footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 375px;
  height: 48px;
  background-color: #fff;
  border-top: 1px solid @border-color;
  display: flex;

  .footer-item {
    flex: 1;
    .center();
    font-size: 10px;
    display: flex;
    flex-direction: column;

    .iconfont {
      font-size: 22px;
    }
  }
}
</style>
